<!--
	学员 底下课程列表
-->
<template>
	<div class="course-list-box" v-loading="isLoading">
		<div class="course-card-box">
			<lzk-student-course-card v-for="item in studentInfoData.courseList"  :course="item"></lzk-student-course-card>
		</div>
	</div>
</template>

<script>
import StudentCourseCardItem from "@/components/StudentCourseCardItem";
import axios from "@/plugins/axios";
import ipconfig from "@/utils/ipconfig";
import {ElMessage} from "element-plus";

export default {
	name: "StudentCourseList",
	data(){
		return {
			/**
			 * 学员登录数据
			 */
			studentInfoData:this.$store.state.studentInfoData,
			/**
			 * 控制加载符号展示
			 */
			isLoading:true,
		}
	},
	components:{
		"lzk-student-course-card":StudentCourseCardItem
	},
	mounted() {
		// 有id才请求
		if(this.studentInfoData.loginInfo.id){
			// 获取学课程列表
			axios.get(ipconfig.address+"/student/courseList/"+this.studentInfoData.loginInfo.id).then((response)=>{
				if(response.data.code==200){
					this.studentInfoData.courseList=response.data.data;
					this.isLoading=false;
				}else{
					ElMessage.warning(response.data.message);
				}
			}).catch((error)=>{
				console.log(error);
			});
		}else{
			// 没得id报错
			ElMessage.warning("获取数据错误，请刷新重试！");
			// location.reload();
		}
	}
}
</script>

<style lang="scss" scoped>
@mixin wh{
	width: 100%;
	height: 100%;
}
.course-list-box{
	@include wh;
	display: flex;
	justify-content: center;

	.course-card-box{
		width: 80%;
		height: 100%;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

	}
}
</style>